<template>
  <div class="userContainer111">
    <van-form @submit="onSubmit">
      <div v-if="this.$route.query.tag == '姓名'">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="name"
          name="name"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
      </div>

      <div v-if="this.$route.query.tag == '用户名'">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="nickname"
          name="nickname"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
      </div>

      <div v-if="this.$route.query.tag == '学号'">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="stu_id"
          name="stu_id"
          :rules="[{ required: true, message: '请填写学号' }]"
        />
      </div>

      <div v-if="this.$route.query.tag == '政治面貌'">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="politics"
          name="politics"
          :rules="[{ required: true, message: '请填写政治面貌' }]"
        />
      </div>

      <div v-if="this.$route.query.tag == '工作单位'">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="company"
          name="company"
          :rules="[{ required: true, message: '请填写工作单位' }]"
        />
      </div>

      <div v-if="this.$route.query.tag == '职业'">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="occupation"
          name="occupation"
          :rules="[{ required: true, message: '请填写职业' }]"
        />
      </div>

      <div v-if="this.$route.query.tag == '社会兼职'">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="work"
          name="work"
          :rules="[{ required: true, message: '请填写社会兼职' }]"
        />
      </div>

      <div v-if="this.$route.query.tag == '个人简介' && isTeacher == 2">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="introduce"
          name="introduce"
          :rules="[{ required: true, message: '请填写个人简介' }]"
        />
      </div>

      <div v-if="this.$route.query.tag == '专业特长'">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="specialty"
          name="specialty"
          :rules="[{ required: true, message: '请填写专业特长' }]"
        />
      </div>

      <div v-if="this.$route.query.tag == '手机号'">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="mobile"
          name="mobile"
          :rules="[
            {
              pattern:
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
              message: '请输入正确内容',
            },
          ]"
        />
      </div>
      <div v-if="this.$route.query.tag == '身份证号'">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="idcard"
          name="idcard"
          :rules="[
            {
              pattern:
                /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
              message: '请输入正确内容',
            },
          ]"
        />
      </div>

      <!--  学生 -->
      <div v-if="this.$route.query.tag == '常住乡镇'">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="area"
          name="area"
          :rules="[{ required: true, message: '请填写常住乡镇' }]"
        />
      </div>
      <div v-if="this.$route.query.tag == '家庭住址'">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="address"
          name="address"
          :rules="[{ required: true, message: '请填写家庭住址' }]"
        />
      </div>
      <div v-if="this.$route.query.tag == '个人简介' && isTeacher == 3">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="introduction"
          name="introduction"
          :rules="[{ required: true, message: '请填写个人简介' }]"
        />
      </div>
      
      <div v-if="this.$route.query.tag == '兴趣爱好' && isTeacher == 1">
        <div class="labelInput">{{ this.$route.query.tag }}</div>
        <van-field
          class="item"
          v-model="hobby"
          name="hobby"
          :rules="[{ required: true, message: '请填写兴趣爱好' }]"
        />
      </div>

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >完成</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isTeacher: 1,
      name: "",
      nickname: "",
      stu_id: "",
      mobile: "",
      idcard: "",
      politics: "",
      occupation: "",
      company: "",
      work: "",
      specialty: "",
      introduce: "",
      // 学生
      area: "",
      address: "",
      introduction: "",
      hobby: '',
    };
  },
  mounted() {
    this.isTeacher = localStorage.getItem("teacher");
    console.log(this.$route.query);
    this[this.$route.query.name] = this.$route.query.value;
  },
  methods: {
    onSubmit(values) {
      values.openid =
        this.$store.state.openid || localStorage.getItem("openid");
      values.id = this.$route.query.id;
      if (localStorage.getItem("teacher") == 2) {
        // 教师
        this.$request.setTeacher(values).then((res) => {
          this.$router.go(-1);
        });
      } else {
        // 学生 志愿者
        this.$request.setMember(values).then((res) => {
          this.$router.go(-1);
        });
      }
    },
  },
};
</script>

<style lang="scss">

.labelInput {
  font-size: 1rem;
  padding: 16px 16px 0 16px;
  color: gray;
}
.userContainer111 {
  color: #4970fd !important;
  .van-field__control{
    color: #4970fd !important;
  }
  .item {
    color: #4970fd;
    font-size: 2rem;
    padding: 0.5rem 0 0.5rem 1rem;
    border-bottom: 1px solid #4970fd;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
  }
}

.van-button--round {
  border-radius: 4px;
}
.van-button--block {
  display: block;
  width: 71%;
  margin: 0 auto;
}
.van-button--normal {
  padding: 0 15px;
  font-size: 2rem;
}
.van-button--info {
  // color: #fff;
  background-color: #4970fd;
  border: 1px solid #4970fd;
}
</style>